<template>
  <li class="SearchCard" v-if="item">
      <van-image
        fit="cover"
        :src="item.img"
        width="50%"
      />
      <img src="../assets/images/play.png" class="play" width="30" v-if="item.vu || false">
      <div class="text">
          <p class="n">{{item.n}}</p>
          <p class="rate">
              <span v-if="item.rate">{{item.rate}}分</span>
              <span>{{item.recommend_label}}</span>
          </p>
          <div class="tag">
              <span 
                v-for="(i,index) in item.recipe_list_tags" 
                :key="index"
                :style="{ color:i.text_color, 
                        background:`linear-gradient(to bottom, ${i.background_start_color} 0%, ${i.background_end_color} 100%)`}"
              >{{i.text}}</span>
          </div>
          <div class="author">
              <van-image
                    round
                    :src="item.a ? item.a.p : item.u.p"
                    width="20"
                />
                <span>{{ item.a ? item.a.n : item.u.n}}</span>
          </div>
      </div>
      <slot name="star"></slot>
  </li>
</template>

<script>
export default {
props:["item"],
data: function(){
    return{
        // fav:true,
    }
},
methods:{
     nolove(){
        this.toast1();
        // this.fav = false;
      },
      toast1: function(){
        this.$toast({
          message: '取消收藏',
          position: 'bottom',
          className: "love",
        });
     },
  }
}
</script>

<style lang="less" >

.SearchCard{
    height: 120px;
    margin: 15px 0;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    position: relative;
    .fav{
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .play{
        position: absolute;
        top: 50%;
        left: 25%;
        transform: translate(-50%,-50%);
    }
    .van-image{
        // height: 100%;
        .van-image__img{
            border-radius: 5px;
        }
    }
    .text{
        margin-left: 10px;
        width: 50%;
        .n{
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 15px;
        }
        .rate{
            font-size: 12px;
            span{
                &::after{
                    content: ' · ';
                    font-size: 20px;
                    vertical-align: middle;
                }
                &:last-child::after{
                    display: none;
                }
            }
        }
        .tag{
            font-size: 10px;
            span{
                display: inline-block;
                transform: scale(0.8);
                padding: 3px;
                border-radius: 2px;
            }
        }
        .author{
            margin-top: 10px;
            font-size: 12px;
            color: #868585;
            display: flex;
            align-items: center;
            span{
                margin-left: 5px;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
    }
}
</style>